<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px gray solid;
        }

        td, th {
            border: 1px gray solid;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>姓名</th>
            <td><input v-mode="ename" /></td>
        </tr>
        <tr>
            <th>职位</th>
            <td>
                <span v-for="j in jobs.data">
                    <input   type="checkbox" :value="j" class="c1"/>{{j}}
                </span>
            </td>
        </tr>
        <tr>
            <th>工资</th>
            <td>
                <input type="number" v-model="begin"/>
                -
                <input type="number" v-model="end">
            </td>
        </tr>
        <tr>
            <th colspan="2">
                <button @click="searchEmp">搜索</button>
            </th>
        </tr>
    </table>
<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>工资</th>
        <th>奖金</th>
        <th>部门ID</th>
    </tr>
    <tr v-for="(e,i) in result.data">
        <td>{{i+1}}</td>
        <td>{{e.ename}}</td>
        <td>{{e.job}}</td>
        <td>{{e.hireDate}}</td>
        <td>{{e.sal}}</td>
        <td>{{e.comm}}</td>
        <td>{{e.deptNo}}</td>
    </tr>
</table>
</div>
</body>
</html>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                result:{},
                jobs: {},
                ename:'',
                begin:0,
                end:0
            }
        },
        created(){
            this.loadData();
            this.loadJobs();
        },
        methods:{
            loadData(){
                let _this=this;
                axios.get('emp')
                .then((response)=>{
                    _this.result=response.data;
                });
            },
            loadJobs(){
                let _this=this;
                axios.get('emp',{
                    params:{
                        type:'job'
                    }
                })
                    .then((response)=>{
                        _this.jobs=response.data;
                    });
            },
            searchEmp(){
                let _this=this;
                let c1=document.getElementsByClassName("c1");
                let array='';
                let j=0;
                for (let i = 0; i < c1.length; i++) {
                   let is= c1[i].checked;
                   if(is){
                       array+=c1[i].value+'';
                       j++;
                   }
                }
                // console.log('数组:'+array);
                axios.get('emp',{
                    params:{
                        ename:_this.ename,
                        job:array,
                        begin: _this.begin,
                        end:_this.end
                    }
                })
                    .then((response)=>{
                        _this.result=response.data;
                    });
            }
        }
    });
</script>